<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta charset="utf-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <title>openlayers地图Demo</title>
    <script src="config.js"></script>
    <link rel="stylesheet" href="./css/ol.css">
    <link rel="stylesheet" href="./css/openlayersMap.css">
    <script type="text/javascript" charset="GB2312" src="./js/ol.js"></script>
    <script type="text/javascript" src="./js/turf.min.js"></script>
    <style>
        #map {
            width: 100%;
            height: 100vh;
        }
        .buttons {
            position: absolute;
            top: 30px;
            right: 20px;
        }
    </style>
</head>
<body>
<div id="map"></div>
<div id="mapView"></div>
<div class="buttons">
    <button onclick="getPoints()">打点</button>
    <button onclick="onHighLight()">点位闪动</button>
    <button onclick="getCircles()">画圆</button>
    <button onclick="resetCenter()">切换中心位置</button>
    <button onclick="getClear()">清空地图</button>
    <button onclick="changeLayers()">切换地图</button>

</div>
</body>
</html>
<script type="text/javascript" src="./js/openlayersMap_3.js"></script>
<script>
    var map = window.openlayersMap, changeIndex = 1;
    /* 初始化地图
    *  target: 放置地图的容器的ID，必须为唯一的 String
    *  centerPoint: 地图中心点位 Array
    *  bgLagers：瓦片地图参数 Array
    *      key：瓦片地图名称 String
    *      url：瓦片地图访问地址 String
    *      default：是否展示 Boolean
    *  bgStreet: 街道的瓦片地图访问地址 String
    * */
    map.init({
        domID: 'map',
        centerPoint: [118.804783999999993, 34.111022],
        bgLagers: [
            {key: 'jdlayers', url: 'http://10.38.16.21:6080/arcgis/rest/services/sldt/MapServer/WMTS', default: true},
            {key: 'yxlayers', url: 'http://10.38.16.21:6080/arcgis/rest/services/yxdt/MapServer/WMTS', default: false},
        ],
        bgStreet: 'http://10.38.16.21:6080/arcgis/rest/services/yxzj/MapServer/WMTS'
    });
    function getPoints () {
        /* 打点
        *  参数：点位信息与线段信息
        *      point: 点位信息 Object
        *        list: 点位信息 Array
        *            lonlat：[经度，纬度] Array
        *            id: 点位id String
        *            img: 点位图标 String
        *            TitleList: 弹窗内所需展示的内容 String
        *        number: 是否展示序号 Boolean
        *        click：点击出现弹窗 Object
        *            target：放置弹窗的dom的id，必须为唯一的 String
        *      line：划线的线段信息 Object
        *          arrow: 是否有箭头方向 Boolean
        *          arrowImg：展示箭头所用的图片 String
        * */
        map.onPint({
            point: {
                list: [
                    {lonlat: [118.79136800765991, 34.11171197891235], id: '111',
                        img: './img/internetBar_blue.png',
                        TitleList: '<div>点位详情1</div>'},
                    {lonlat: [118.79050970077515, 34.10561800003052], id: '222',
                        img: './img/internetBar_blue.png',
                        TitleList: '<div>点位详情2</div>'},
                    {lonlat: [118.79681825637817, 34.101154804229736], id: '333',
                        img: './img/internetBar_blue.png',
                        TitleList: '<div>点位详情3</div>'},
                ],
                number: true,
                click: {
                    target: 'mapView',
                },
            },
            line: {
                arrow: true,
                arrowImg: './img/point_1.png',
            }
        });
    }
    function getCircles () {
        /* 画圆
        *  参数：圆的参数 Object
        *      centreJd：圆心经度 String
        *      centreWd：圆心纬度 String
        *      list：圆的详细参数 Array
        *          id: 圆的ID String
        *          range: 圆的半径 String
        *          color: 圆的填充颜色 String
        * */
        map.addCircular({centreJd: '118.75764727592468', centreWd: '34.12535905838013',
            list:[
                {id:"4e08fb201ba04b03bd066524da694006",range:"300",color:"rgba(255, 0, 0, 0.4)"},
                {id:"03145f89160d42a98bd0c94ad9ad49e4",range:"400",color:"rgba(231, 161, 79, 0.4)"},
                {id:"cd13f9be03b24f3ca89895e16cfe5d54",range:"500",color:"rgba(52, 168, 83, 0.4)"}
            ]
        });
    }
    function getClear () {
        /* 清除所有点位、线段、圆等元素
        * */
        map.removerAll();
    }
    function changeLayers () {
        if (changeIndex % 2 === 1) {
            /* 切换瓦片地图【底图】的展示
            *  参数: 需要展示的底图名称 String
            * */
            map.changeLayers('yxlayers');
        } else map.changeLayers('jdlayers');
        changeIndex++
    }
    function resetCenter () {
        /* 重新设置地图中心位置
        *  参数1: 经度 Number
        *  参数2: 纬度 Number
        * */
        map.resetCenter(118.804783999999993, 34.111022);
    }
    function onHighLight () {
        /* 设置地图点位高亮
        *  参数: 需要闪动的点位参数 Object
        *      lonlat：[经度，纬度] Array
        *      id: 点位id String
        *      img: 点位图标 String
        * */
        map.onHighLight({
            lonlat: [118.79136800765991, 34.11171197891235], id: '111',
            img: './img/internetBar_blue.png'
        });
    }
</script>